<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link href="css/main.css" rel="stylesheet" type="text/css" />
		<link href="css/sim-prev-anim.css" rel="stylesheet" type="text/css" />

	</head>
	<body>

		<div class="albums">
			<div class="albums-inner" id="listbox">
				<!-- 内容存放区 -->
			</div>

		</div>


	</body>
	<script>
		const {
			remote,
			clipboard,
			ipcRenderer
		} = window.ipcRenderer;
		// 渲染进程给主进程发送消息
		function sendToMainProcess(e) {
			console.log(e.target, e.target.nodeName.toLowerCase() == 'img')
			if (e.target.nodeName.toLowerCase() == 'img') {
				// 向主进程发送 ppyy 事件
				ipcRenderer.send('postimgurl', {
					data: e.target.src,
				})
				// console.log(e.target.src, 987)
				// var arr = e.target.src.split("/")
				// var imgurl = arr[arr.length - 1]
			}
			
		}
		// 渲染进程监听 imgUploadMsgFromMain 事件
		// ipcRenderer.on('imgUploadMsgFromMain', (event, message) => {
		//   console.log('接收主进程发送的数据')
		//   console.log(JSON.stringify(message),8080)
		// })
		// ___________________________________
		// 发送ajax 请求 需要 五步
		// （1）创建异步对象
		var ajaxObj = new XMLHttpRequest();
		// （2）设置请求的参数。包括：请求的方法、请求的url。
		ajaxObj.open('get', 'http://localhost:3000/data');
		// （3）发送请求
		ajaxObj.send();
		//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
		ajaxObj.onreadystatechange = function() {
			if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
				// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
				console.log('数据返回成功');
				console.log(JSON.parse(ajaxObj.responseText), 152);
				// 修改页面的显示
				var data = JSON.parse(ajaxObj.responseText).data

				var html = [];
				html.push("<ul>")
				for (var i = 0, len = data.length; i < len; i++) {
					html.push(
						`
					<div class="albums-tab">
						<div class="albums-tab-thumb sim-anim-${i+1}" onclick="sendToMainProcess(event)">
									${data[i].homeImgList.map((element, index) => {
										return `<img src="${element.imgUrl}" class="all studio" />`
									}).join('')}
						</div>
						<div class="albums-tab-text">${data[i].homeTit} <span>(9 pictures)</span></div>
					</div>
					`
					);
				}
				listbox.innerHTML = html.join("");



			}
		}
	</script>
</html>
